<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">
#list li{float: left;padding: 0 15;line-height: 40px;font-size: 20px; list-style: none;}
.box h1{font-size: 26px;}
div.book{height: 400px;}
div.phone{height: 700px;}
div.jiadian{height: 800px; text-align: center;}
div.shuma{height: 450px}
</style>
<body>
	<div style="width: 100%;height: 300px;background: #green;"></div>
	<ul id ="list" style="width: 1000px;margin: 0 auto">
	111111111111111111111
	</ul>
<div class="box book">
	<h1>图书列表</h1>
</div>
<div class="box phone">
	<h1>手机列表</h1>
</div>
<div class="box jiadian">
	<h1>家电列表</h1>
</div>
<div class="box shuma">
	<h1>数码列表</h1>
</div>

</body>
<script type="text/javascript">
	function $(s){
		return document.querySelectorAll(s);
	}
	var nav = $("#nav")[0];
	var list = $("#list")[0];
	var odiv = $(".box")
	var arr = [{txt:"图书",cname:"book"},{txt:"手机",cname:"phone"},{txt:"家电",cname:"jiadian"},{txt:"数码",cname:"shuma"}]
	function init(arr){
		for (var i = 0; i < arr.length; i++) {
			var li = document.createElement("li");
			li.innerHTML = arr[i].txt;
			li.className = arr[i].cname;
			list.appendChild(li);
		}
		oli = $("#list li");
	}
	init(arr);
//保证oli组合里的li都能被获取
/*
下一个：nextSibling
上一个：previousSibling
 */
function addChild(){
	var cname = dom,className;
	if (cname) {
		dom.className+="className";
	}
}
list.addEventListener("click",function(e){
	if (e.target.tagName=="LI") {
		//点击的li对应的div
		var c = e.target.className;
		for (var i = 0; i < oli.length; i++) {
		 	oli[i].className="";
		 } 
		 e.target.className = "curr";
		for (var div = 0; div <odiv .length; div++) {
			if (odiv[i].className.indexOf(e.target.className)!=-1) {
				//文档滚 跳转的位置
				var dtop = document.documentElement.scrollTop,
				ntop = odiv[i].offsetTop-40
				if (dtop>ntop) {
					toUp
				};
				toUp(dtop,ntop);
			}
		}
	}add remove 
})
function toDown(dtop,ntop){
	if (Math.round(dtop)>=ntop) {
		return;
	}else{
		window.scrollTop(0,dtop);
		setTimeout(function(){
			toDown(dtop+(ntop+dtop)/10,ntop);
		},7)
	}
}
function toUp(d,n){
	if (Math.round(dtop)<=ntop) {

	}else{
		window.scrollTop(0,dtop);
		setTimeout(function(){
			toUp(dtop-(dtop-ntop)/10,ntop)
		},7)
	}
}
// window.onscroll = function(){//滚动事件
// 	if (document.documentElement.scrollTop>=300) {
// 		nav.style.position = "fixed";
// 		nav.style.left = "0";
// 		nav.style.top = "0";
// 	}else{
// 		nav.style.position = "static";
// 	}
// }

</script>
</html>

<!--<!DOCTYPE html>
	js页面跳转到指定位置

<html>
<head>
    <title></title>
</head>
<body>
    <a id="top"></a>
   <h1>跳转到指定位置</h1> 
<div style="height: 500px;"></div>
    <a href="#top" onclick="gotoTop()">回到顶部</a>
    <div style="height: 300px"></div>
</body>
<script type="text/javascript">
  
/*
1.a链接到指定id的a标签（锚点）
缺点
--地址栏加了hash  #
--速度不能控制
--多余标签
--可能要给多余的a标签设置位置
优点
--不用计算位置
2.js实现跳转指定位置
window.scrollTo(x,y);
window.scrollTo({left:x,top:y,behavior:""})
behavior 地还未
--behavior:auto自动  instant瞬间  smooth平滑

smooth:耗费的时间太长(滚动的距离远，不能调速度)
3.设置滚动函数，可以调整速度
--当前滚动位置：document.documentElement.scrollTop
--需要跳转的位置:offsetTop


 */
document.getElementById("goTop").onclick = function(){

}
  function gotoTop(){
    //dtop：文档的滚动条，htop是要跳转的元素，顶部距离
        var dtop = document.documentElement.scrollTop,
        htop = document.querySelector("h1").offsetTop;
        gotoTop(dtop,htop);
        }
        function gotoTop(d,h){
            if (Math.round(d)<=h) {
                return 
            }else{
            window.scrollTop(0,d);
            //d-h  h  d-(d-h)
            setTimeout(function(){
               gotoTop(d-(d-h),h);
               //缓动  d 300 h 100
            },5)
        }
    }
        window.scrollTo(0,dtop-htop);
        if (true) {}
        setTimeout(function(){
            gotoTop()
        },50
        )
    


</script>
</html>-->